<template>
  <div class="app-container over-scroll">
    <el-tabs v-model="req.ARG_DEFINE_CODE" type="card" @tab-click="getList">
      <el-tab-pane v-for="(tab, index) in tabList" :key="index" :label="tab.name" :name="tab.code"></el-tab-pane>
    </el-tabs>
    <!-- <div class="mb20">
      <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
    </div> -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
        <template slot-scope="{ $index }">
          {{ $index + 1 + (req.page - 1) * req.pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="memberName" label="申请人" min-width="120" align="left" show-overflow-tooltip>
        <template slot-scope="{row}">
            {{row.variables && row.variables.memberName}}
        </template>
      </el-table-column>
      <el-table-column prop="deptName" label="所在部门" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="gmtCreate" label="申请时间" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="申请流程" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="状态" width="140" align="center">
        <template slot-scope="{ row }">
          <span>{{ formatRecordType(row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" align="center">
        <template slot-scope="{ row }">
          <el-button @click="dtl(row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination>

    <!-- 弹窗 -->
    <dtl :show.sync="showDetail" :item="current" @change="getList"></dtl>
  </div>
</template>

<script>
import dtl from './components/dtl.vue';
import { defineList, recordList } from '@/api/flow';

export default {
  name: 'FlowInstance',
  components: {
    dtl
  },
  data() {
    return {
      tabList: [],
      show: false,
      showDetail: false,
      current: {},
      list: [],
      total: 0,
      req: {
        ARG_DEFINE_CODE: null,
        ARG_USER_SYSTEM: 1, //-1前端用户 0 后台系统用户 1 租户系统用户
        page: 1,
        pageSize: 20
      }
    };
  },
  created() {
    this.getDefine();
  },
  methods: {
    getDefine() {
      defineList({
        ARG_CATEGORY: 'DEFAULT',
        ARG_USER_SYSTEM: 1
      }).then((res) => {
        res.data.forEach((item) => {
          item.id = `${item.id}`;
        });
        if (res.data && res.data.length) {
          this.tabList = res.data;
          this.req.ARG_DEFINE_CODE = res.data[0].code;
          this.getList();
        }
      });
    },
    // 获取列表
    getList() {
      recordList(this.req).then((res) => {
        this.list = res.data || [];
        this.total = res.total;
      });
    },
    // 添加
    add() {
      this.current = {};
      this.show = true;
    },
    // 修改
    edit(row) {
      this.current = JSON.parse(JSON.stringify(row));
      this.show = true;
    },

    dtl(row) {
      this.current = JSON.parse(JSON.stringify(row));
      this.showDetail = true;
    }
  }
};
</script>
